<!DOCTYPE html>
<!--[if lte IE 7 ]>
<html class="no-js ie lte7 lte8 lte9 css"> <![endif]-->
<!--[if IE 8 ]>
<html class="no-js ie ie8 lte8 lte9 css"> <![endif]-->
<!--[if IE 9 ]>
<html class="no-js ie ie9 lte9 css"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html class="no-js css">
<!--<![endif]-->
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="keywords" content="CmPage, ThinkJS, Node.js, B-JUI, MUI, HTML5+, MVC, 权限管理, 工作流, " />
    <meta name="description" content="CmPage 是一款企业信息管理系统的二次开发框架，采用ThinkJS和B-JUI等开源框架实现。" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <title>CmPage 管理系统框架 采用ThinkJS B-JUI</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="alternate icon" type="image/png" href="http://s.amazeui.org/assets/2.x/i/favicon.png" />
    <link rel="apple-touch-icon-precomposed" href="http://s.amazeui.org/assets/2.x/i/app-icon72x72@2x.png" />
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="stylesheet" href="http://cdn.amazeui.org/amazeui/2.7.1/css/amazeui.min.css" />
    <link rel="stylesheet" href="http://s.amazeui.org/assets/2.x/css/amaze.min.css?v=ir1seon2" />
    <!--[if (gte IE 9)|!(IE)]><!-->
    <script src="http://s.amazeui.org/assets/2.x/js/jquery.min.js"></script>
    <!--<![endif]-->
<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.amazeui.org/modernizr/2.8.3/modernizr.js"></script>
<script src="http://s.amazeui.org/assets/2.x/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="http://cdn.amazeui.org/amazeui/2.7.1/js/amazeui.min.js"></script>
<link rel="canonical" href="http://amazeui.org/css/print?_ver=2.x" />
<style>
    .get {
        background: #1E5B94;
        color: #fff;
        text-align: center;
        padding: 30px 0;
        font-size: 120%;
    }

    .get-title {
        font-size: 200%;
        border: 2px solid #fff;
        padding: 20px;
        display: inline-block;
    }

    .get-btn {
        background: #fff;
    }

    .footer p {
        color: #7f8c8d;
        margin: 0;
        padding: 15px 0;
        text-align: center;
        background: #2d3e50;
    }
</style>
</head>
<body class="" data-amui="2.x">

<% include _index_header.html %>

<div class="get" >
    <div class="am-g">
        <div class="am-u-lg-12">
            <p >
                文档君正在努力整理中 ......
            </p>

        </div>
    </div>
</div>
<section class="" id="amz-main" data-tag="css-print">
    <div class="am-g am-g-fixed">
        <div class="col-md-3 am-u-md-3">
            <div id="amz-offcanvas" class="am-offcanvas doc-offcanvas">
                <section class="amz-sidebar am-offcanvas-bar">
                    <ul class="am-nav">
                        <li class="am-nav-header">框架介绍</li>
                            <li><a href="/css/normalize">文件详解</a></li>
                            <li><a href="/css/base">基础设置<span class="am-nav-en">Base</span></a></li>
                            <li><a href="/css/typography">文字排版<span class="am-nav-en">Typography</span></a></li>
                            <li class="am-active"><a href="/css/print">打印样式<span class="am-nav-en">Print</span></a></li>
                        <li class="am-nav-header">布局相关</li>
                            <li><a href="/css/grid">网格<span class="am-nav-en">Grid</span></a></li>
                            <li><a href="/css/block-grid">等分网格<span class="am-nav-en">AVG Grid</span></a></li>
                            <li><a href="/css/utility">辅助类<span class="am-nav-en">Utility</span></a></li>
                        <li class="am-nav-header">HTML 元素</li>
                            <li><a href="/css/button">按钮<span class="am-nav-en">Button</span></a></li>
                            <li><a href="/css/code">代码<span class="am-nav-en">Code</span></a></li>
                            <li><a href="/css/form">表单<span class="am-nav-en">Form</span></a></li>
                            <li><a href="/css/image">图片<span class="am-nav-en">Image</span></a></li>
                            <li><a href="/css/table">表格<span class="am-nav-en">Table</span></a></li>

                    </ul>
                </section>
                <div class="amz-pager">
                    <a href="#up" class="am-icon-caret-up" data-rel="scrollUp"></a>
                    <a href="#down" class="am-icon-caret-down" data-rel="scrollDown"></a>
                </div>
            </div>
        </div>
        <div class="col-md-9 am-u-md-9 doc-content">
            <div class="doc-toc">
                <h2><span>目录</span></h2>
                <div class="doc-toc-bd">
                    <ul class="md-toc">
                        <li><a href="#xian-shi-url-lian-jie">显示 URL 链接</a></li>
                        <li><a href="#fu-zhu-class">辅助 Class</a></li>
                        <li><a href="#can-kao-lian-jie">参考链接</a></li>
                    </ul>
                </div>
            </div>
            <h1 id="print">Print <a href="#print" title="Heading anchor" class="doc-anchor"></a></h1>
            <hr />
            <p>打印样式组件，打印时将 <code>color</code> 设置成黑色，删除 <code>background</code> 、<code>text-shadow</code> 、<code>box-shadow</code> 样式，以节省打印机耗材，加快打印速度。</p>
            <h2 id="xian-shi-url-lian-jie">显示 URL 链接 <a href="#xian-shi-url-lian-jie" title="Heading anchor" class="doc-anchor"></a></h2>
            <p>利用 CSS3 <code>content</code> 属性，将 <code>&lt;a&gt;</code> 和 <code>&lt;abbr&gt;</code> 的标题、链接显示在后面。</p>
            <div class="doc-example">
                <a href="http://www.amazeui.org">Amaze UI</a>
                <br />
                <abbr title="http://www.amazeui.org">Amaze UI</abbr>
            </div>
            <div class="doc-code demo-highlight">
      <pre class=""><code class="xml"><span class="hljs-comment">&lt;!-- 点击浏览器菜单里的【打印】，预览打印样式 --&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;http://www.amazeui.org&quot;</span>&gt;</span>Amaze UI<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">abbr</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;http://www.amazeui.org&quot;</span>&gt;</span>Amaze UI<span class="hljs-tag">&lt;/<span class="hljs-name">abbr</span>&gt;</span></code></pre>
            </div>
            <h2 id="fu-zhu-class">辅助 Class <a href="#fu-zhu-class" title="Heading anchor" class="doc-anchor"></a></h2>
            <ul>
                <li><code>am-print-hide</code> 浏览器可见，打印机隐藏。</li>
                <li><code>am-print-block</code>、<code>am-print-inline-block</code>、<code>am-print-inline</code> 打印机可见，浏览器隐藏。在打印机中分别对应为<code>block</code>,<code>inline-block</code>,<code>inline</code>样式。</li>
            </ul>
            <div class="doc-example">
                <div class="am-print-hide">
                    <button type="button" class="am-btn am-btn-primary am-btn-block">浏览器可见，打印机不可见</button>
                </div>
                <div class="am-print-block">
                    <button type="button" class="am-btn am-btn-primary am-btn-block">打印机可见，浏览器不可见</button>
                </div>
            </div>
            <div class="doc-code demo-highlight">
      <pre class=""><code class="xml"><span class="hljs-comment">&lt;!-- 在打印预览中查看效果 --&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;am-print-hide&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;am-btn am-btn-primary am-btn-block&quot;</span>&gt;</span>浏览器可见，打印机不可见<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

          <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;am-print-block&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;am-btn am-btn-primary am-btn-block&quot;</span>&gt;</span>打印机可见，浏览器不可见<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
            </div>
            <h2 id="can-kao-lian-jie">参考链接 <a href="#can-kao-lian-jie" title="Heading anchor" class="doc-anchor"></a></h2>
            <ul>
                <li><a href="https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css">html5-boilerplate main.css</a></li>
            </ul>
            <div id="issue-list"></div>
            <script type="text/x-handlebars-template" id="issue-list-tpl"><h2>Issue 列表</h2>
                <ul class="am-list issue-list">
                    {{#each this}}
                    <li><a href="{{html_url}}" target="_blank" class="am-text-truncate am-icon-bug">{{title}}
                <span
                        class="am-badge {{#ifCond state '=='
                  'open'}}am-badge-danger{{else}}am-badge-success{{/ifCond}}">{{state}}</span></a></li>
                    {{/each}}
                </ul></script>
            <div class="ds-thread" id="ds-thread" data-thread-key="9b2e7f4acc1f4fd23646cafa0fa3c335" data-title="CSS - Print | Amaze UI"></div>
        </div>
    </div>
</section>

<a href="#amz-offcanvas" class="am-icon-btn am-icon-bars am-show-sm-only amz-sidebar-toggle" data-am-offcanvas=""><span class="am-sr-only">侧栏导航</span></a>

<% include _index_footer.html %>

<div class="amz-toolbar" id="amz-toolbar">
    <a href="#top" title="回到顶部" class="am-icon-btn am-icon-arrow-up" id="amz-go-top"></a>
    <a href="/admin/index/faq" title="常见问题" class="am-icon-faq am-icon-btn am-icon-question-circle"></a>
</div>

<script src="http://s.amazeui.org/assets/2.x/js/handlebars.min.js"></script>
<script src="http://s.amazeui.org/assets/2.x/js/main.min.js"></script>

</body>
</html>